<template>
    <div>
        <el-page-header @back="goBack" content="采购开票"></el-page-header>
        <div class="common_line" style="margin: 10px 0;"></div>

        <el-form :model="queryParams" label-width="auto">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="关键词:">
                        <el-input style="width: 240px;" maxlength="100" v-model="queryParams._search" placeholder="订单编号/商品名称/备注" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="采购日期:">
                        <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                            v-model="queryParams.create_datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                            placeholder="请选择时间区间" style="width: 240px;" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" icon="el-icon-search" @click="handleQuery"
                        style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-row class="mb8">
            <el-button
                :class="multiple?'btn_info_color':'btn_primary_color'"
                size="small"
                :disabled="multiple"
                @click="addInvoice"
            >批量开票</el-button>
        </el-row>

        <el-table border :data="orderLists" @selection-change="handleSelectionChange" style="margin-top: 15px;">
            <el-table-column type="selection" width="60" align="center" />
            <el-table-column label="单号" align="left" prop="corp_order_no" />
            <el-table-column label="供货商名称" align="left" prop="supplierName" />
            <el-table-column label="采购金额" align="left" prop="shouldReceived" />
            <el-table-column label="采购时间" align="left" prop="purchase_date" />
            <el-table-column label="订单状态" align="left" prop="statusName">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='0'" style="color: red;">{{ scope.row.statusName }}</span>
                    <span v-else-if="scope.row.status=='1'" style="color: #00b8ae;">{{ scope.row.statusName }}</span>
                    <span v-else style="color: red;">{{ scope.row.statusName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleOpenInvoice(scope.row)"
                        style="font-weight: bold;"
                    >开票</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="getOrderLists"
            @current-change="getOrderLists"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getBuyList, addInvoices } from "@/api/purchase";
export default {
    name: 'invoice',
    data() {
        return {
            corp: '',
            queryParams: {
                _search: '',
                invoice_status: '1',
                create_datetime: [],
                purchase_date__lte: '',  //小于等于
                purchase_date__gte: '',  //大于等于
            },
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            orderLists: [],
            multiple: true,
            selectIds: [],
        }
    },
    watch: {
        'queryParams.create_datetime': {
            handler(value){
                if(value){
                    this.queryParams.purchase_date__lte = value[1]
                    this.queryParams.purchase_date__gte = value[0]
                }
                else{
                    this.queryParams.purchase_date__lte = this.queryParams.purchase_date__gte = null
                }
            },
            deep: true
        }
    },
    props: {
        corpId: {
            type: Number
        }
    },
    mounted() {
        this.corp = this.corpId
        this.getOrderLists()
    },
    methods: {
        goBack() {
            this.$emit('success')
        },
        handleOpenInvoice(row) {
            this.selectIds = [row.id]
            this.addInvoice()
        },
        addInvoice() {
            var that = this
            addInvoices({
                corp_id: that.corp,
                order_id_list: that.selectIds
            }).then(res => {
                if (res.code == 200){
                    that.$message.success('操作成功')
                    that.handleQuery()
                }
            })
        },
        handleQuery() {
            this.pageParam.page = 1
            this.getOrderLists()
        },
        getOrderLists() {
            this.queryParams.corp = this.corp
            this.queryParams.is_draft = 0
            let params = Object.assign({}, this.queryParams, this.pageParam)
            getBuyList(params).then(res => {
                let list = res.data.data.purchase_list.filter(item => {
                    item.supplierName = item.supplier_detail.name
                    item.corp_order_no = item.corp_order_no || ''
                    item.handler = item.handler_user_detail ? item.handler_user_detail.username:''
                    item.shouldReceived = parseFloat(item.sold_price).toFixed(2)
                    item.pending_payment = parseFloat(item.pending_payment) || 0
                    if (String(item.pending_payment) == String(item.order_price)){  //未付款
                        item.status = '0'
                        item.statusName = '未付款'
                    }else if (parseInt(item.pending_payment) === 0){  //全部付款
                        item.status = '1'
                        item.statusName = '已付款'
                    }else{  //部分付款
                        item.status = '2'
                        item.statusName = '待付款：￥'+ item.pending_payment.toFixed(2)
                    }

                    item.invoice_no = ''
                    if (item.sale_invoice_show && item.sale_invoice_show.length){
                        item.invoice_no = item.sale_invoice_show.map(el => el.invoice_no).join(',')
                    }
                    return item
                })
                this.orderLists = list
                this.total = res.data.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            // console.log(selection);
            this.multiple = !selection.length
            let ids = selection.map(item => item.id)
            this.selectIds = ids
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
</style>